<template>
  <el-table :data="fisStore.fisData" border style="width: 100%;height: 600px; overflow: scroll"
    :row-class-name="tableRowClassName">
    <el-table-column type="index" label="序号" width="115" />
    <el-table-column prop="partTypeName" label="零件-类别" width="130" />
    <el-table-column prop="vinNo" label="底盘号" width="180" />
    <el-table-column prop="bauNo" label="零件号" width="180" />
    <el-table-column prop="numOfBau" label="零件数量" width="115" />
    <el-table-column prop="timeJit" label="M100时间" width="200" />
    <el-table-column prop="yearJit" label="供货年份" width="115" />
    <el-table-column prop="supNo" label="厂家代码" width="180" />
    <el-table-column prop="seqNo" label="顺序号" width="115" />
    <el-table-column prop="type" label="车型" />
  </el-table>
</template>
<script setup lang='ts' name='BottomTable'>

import { onMounted } from 'vue';
import { useFiStore } from '@/stores/fis'

const fisStore = useFiStore()

const tableRowClassName = ({ row, rowIndex }) => {
  return rowIndex % 2 === 1 ? 'even-row' : 'odd-row';
}

// onMounted(() => {
//   fisStore.getFisData()
// })
</script>
<style scoped>
:deep(.el-table__row) {
  height: 37px;
}

:deep(.el-table__header th) {
  background-color: #00b0f0 !important;
  color: white;
  text-align: center !important;
}

:deep(.even-row) {
  background-color: #e7f2fc !important;

}

:deep(.odd-row) {
  background-color: rgb(203, 226, 240) !important;

}

:deep(.el-table__row) {
  height: 10px;
}

:deep(.el-table .cell) {
  text-align: center;
}

/* 禁用鼠标悬停效果 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: inherit !important;
}
</style>